<template>
  <div id="box">
      <OdCard type="realtime">
        <OdRealtime v-if="realtimeData.dataLoaded" :time="realtimeData.time" :dis="realtimeData.dis" :num="realtimeData.num"/>
      </OdCard>
      <OdCard type="bus" @click="choose">
        <OdBus v-if="busData.dataLoaded" :num="busData.num" :stops="busData.stops"/>
      </OdCard>
      <OdCard type="taxi">
        <OdTaxi v-if="taxiData.dataLoaded" :num="taxiData.num"/>
      </OdCard>
      <OdCard type="od" @click="choose">
        <h1 style="margin-top: 32px;font-size: 26px;font-weight: bold;text-align: left;padding-left: 10px;">车辆运营分析OD图</h1>
      </OdCard>
  </div>
</template>

<script>
  import OdCard from "./odCard.vue";
  import OdRealtime from "./cardContent/odRealtime.vue";
  import OdBus from "./cardContent/odBus.vue";
  import OdTaxi from "./cardContent/odTaxi.vue";
  import {mapGetters, mapActions} from 'vuex';

  export default {
    name: "od-home",

    data: function () {
      return {
        msg: "Welcome to Your Vue.js App"
      }
    },

    computed: {
      ...mapGetters({
        realtimeData: "od/realtime",
        busData: "od/bus",
        taxiData: "od/taxi"
      })
    },

    methods: {
      ...mapActions({
        getData: "od/getAnalysiseDataData"
      }),
      choose: function (type) {
        this.$emit("changestate", type);
      }
    },

    mounted: function () {
      this.getData()
    },

    components: {
      OdCard,
      OdRealtime,
      OdBus,
      OdTaxi
    }

  }
</script>

<style scoped lang="scss">
  @import "../../../static/common/common.scss";
  #box {
    pointer-events: auto;     //浮在地图上，其父元素禁用了鼠标事件，这里解除
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
